import React from 'react';
import { Box, Typography, Paper } from '@mui/material';
import { format } from 'date-fns';

const Message = ({ message }) => {
  const isUser = message.isUser;
  const isStreaming = message.isStreaming;

  return (
    <Box
      sx={{
        display: 'flex',
        justifyContent: isUser ? 'flex-end' : 'flex-start',
        mb: 2,
      }}
    >
      <Paper
        elevation={1}
        sx={{
          p: 2,
          maxWidth: '70%',
          backgroundColor: isUser ? 'primary.main' : 'background.paper',
          color: isUser ? 'white' : 'text.primary',
          borderRadius: 2,
          position: 'relative',
        }}
      >
        <Typography variant="body1" sx={{ whiteSpace: 'pre-wrap' }}>
          {message.content}
          {isStreaming && (
            <Box
              component="span"
              sx={{
                display: 'inline-block',
                width: '8px',
                height: '8px',
                backgroundColor: isUser ? 'white' : 'primary.main',
                borderRadius: '50%',
                marginLeft: '4px',
                animation: 'blink 1s infinite',
                '@keyframes blink': {
                  '0%': { opacity: 0 },
                  '50%': { opacity: 1 },
                  '100%': { opacity: 0 },
                },
              }}
            />
          )}
        </Typography>
        <Typography
          variant="caption"
          sx={{
            position: 'absolute',
            bottom: -20,
            right: 0,
            color: 'text.secondary',
            fontSize: '0.75rem',
          }}
        >
          {format(new Date(message.timestamp), 'HH:mm')}
        </Typography>
      </Paper>
    </Box>
  );
};

export default Message; 